let page
let num
let j=1
let menu=[
  {bianhao:'02568',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'05658',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'16568',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'15668',mingcheng:'通讯车',fenlei:'通讯车',state:'停用',price:'466666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'56258',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'71468',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'15465',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'15647',mingcheng:'轻型步战车',fenlei:'装甲车',state:'维修中',price:'666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'78214',mingcheng:'重型装甲车',fenlei:'装甲车',state:'停用',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'89612',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'98712',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'15472',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'15752',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'15498',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'停用',price:'566666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'68720',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'41743',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'54564',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'86822',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'85971',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'15463',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'89965',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'59666',mingcheng:'轻型步战车',fenlei:'装甲车',state:'维修中',price:'666666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'55122',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'自购',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'65542',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'26566',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'正常',price:'566666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'87563',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'56997',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'78546',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'78964',mingcheng:'轻型步战车',fenlei:'装甲车',state:'维修中',price:'666666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'08522',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'06999',mingcheng:'重型装甲车',fenlei:'装甲车',state:'正常',price:'1666666',way:'分配',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'89652',mingcheng:'重型装甲车',fenlei:'装甲车',state:'维修中',price:'1666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'66325',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'自购',unit:'装甲三连',location:'三连装备库',name:'彭于晏',riqi:'2020/05/13'},
  {bianhao:'78542',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'76325',mingcheng:'通讯车',fenlei:'通讯车',state:'正常',price:'466666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
  {bianhao:'86331',mingcheng:'轻型步战车',fenlei:'装甲车',state:'正常',price:'666666',way:'分配',unit:'装甲一连',location:'一连装备库',name:'胡歌',riqi:'2020/05/13'},
  {bianhao:'65463',mingcheng:'后勤保障车',fenlei:'后勤保障车',state:'维修中',price:'566666',way:'自购',unit:'装甲二连',location:'二连装备库',name:'高圆圆',riqi:'2020/05/13'},
]

let fenyeData=menu
function showMenu(data){
$('#tbody').html('')
$.each(data,(index,item)=>{
$('#tbody').append(`
 <tr class="ziti">
  <td class="col-md-1 item"><form action=""><input name="Fruit" class='ss' type="checkbox" value=""data-item='${JSON.stringify(item)}'></form></td> 
  <td class="col-md-1 item">${item.bianhao}</td> 
  <td class="col-md-1 item">${item.mingcheng}</td> 
  <td class="col-md-1 item">${item.fenlei}</td> 
  <td class="col-md-1 item">${item.state}</td> 
  <td class="col-md-1 item">${item.price}</td> 
  <td class="col-md-1 item">${item.way}</td> 
  <td class="col-md-1 item">${item.unit}</td> 
  <td class="col-md-1 item">${item.location}</td> 
  <td class="col-md-1 item">${item.name}</td> 
  <td class="col-md-2 item">
    <button class="glyphicon glyphicon-eye-open chakan" aria-hidden="true"  data-item='${JSON.stringify(item)}'></button>
    <button class="glyphicon glyphicon-trash shanchu" aria-hidden="true"  data-item='${JSON.stringify(item)}'></button>
  </td>
  </tr>`)
  })
}
show(1)
// 进行分页
function fenye(num, data) {
  let qishi = (num - 1) * 5
  let arr = data.slice(qishi, qishi + 5)
  showMenu(arr)
}
function showDiv(data) {
  $('#mydiv').html('')
  num = Math.ceil(data.length / 5)
}
function show(j) {
  showDiv(fenyeData)
  fenye (j,fenyeData)
  suolue()  
}   
//分页
function suolue() {

  $(function () {
    let mydiv = $("#mydiv")
    let data = {
      pageCount: num,
    }
    //表示前后都有省略号时中间页面刷新基准，为了防止点击中间时页面频繁刷新页面导致的视觉错位
    let tmpPageIndex = 0;
    $(document).on("click", "#mydiv div",function () {
      page = $(this).attr("page")
  
  if(page){
          page =parseInt(page)
          j=page
          refreshPageInfo(data, page);
  }
})

$('#mydiv').on("click", "#pre",function () {
  if(j>1){
    j--
    fenye(j,fenyeData)
    refreshPageInfo(data, j);
  }
})
$('#mydiv').on("click", "#next",function () { 
  if(j<num){
    j++

    
    fenye(j,fenyeData)
    refreshPageInfo(data, j);
  }
})
$('#tiaozhuan button').click(function () {
  let val=$('#tiaozhuan>input').val()
  console.log(val);
  j=parseInt(val)
  fenye(j,fenyeData)
  refreshPageInfo(data, j);

})
$('#tbody').on("click", ".shanchu",function (){
  let obj1 = JSON.parse($(this).attr('data-item'))
  for(let i=0;i<fenyeData.length;i++){
    if (obj1.bianhao==fenyeData[i].bianhao) {
      fenyeData.splice(i,1)
      show(j) 

    }
  }
})


    // 刷新|生成分页信息|自定义属性page表示当前页面索引
    function refreshPageInfo(data, pageIndex) {
      let pageSize = data.pageCount
      mydiv.html('')
      let div = $('<div id="pre"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></div>')
      mydiv.append(div)
      // mydiv.append('<div page=' + pageSize + '>' + pageSize + '</div>')
      // 总页数小于等于5页，全部显示
      if (pageSize <= 5) {

        for (let i = 1; i <= pageSize; i++) {
          let div = $('<div page="' + i + '">' + i + '</div>')
          addActive(div, i, pageIndex)
          mydiv.append(div)
        }
        // 当前页是前3页
      } else if (pageIndex < 4) {
        for (let i = 1; i <= 4; i++) {
          let div = $('<div page="' + i + '">' + i + '</div>')
          addActive(div, i, pageIndex)
          mydiv.append(div)
        }
        mydiv.append('<div>' + '...' + '</div>')
        mydiv.append('<div page=' + pageSize + '>' + pageSize + '</div>')
        // 当前页面是最后3页
      } else if (pageSize - pageIndex < 3) {
        if (pageSize - 3 > 1) {
          mydiv.append('<div page="1">1</div>')
          mydiv.append('<div>...</div>')
        }
        for (var i = pageSize - 3; i <= pageSize; i++) {
          let div = $('<div page="' + i + '">' + i + '</div>')
          addActive(div, i, pageIndex)
          mydiv.append(div)
        }
      } else {
        // 当前页面基于所有页面中间位置
        // 初始化页面基准坐标
        if (tmpPageIndex == 0) {
          tmpPageIndex = pageIndex
        }
        // 当页面索引达到最前或最后时，需要重新设置页面基准坐标
        if (tmpPageIndex <= pageIndex - 1 || tmpPageIndex >= pageIndex + 1) {
          tmpPageIndex = pageIndex
        }
        mydiv.append('<div page="1">1</div>')
        mydiv.append('<div>...</div>')
        for (var i = tmpPageIndex - 1; i <= tmpPageIndex + 1; i++) {
          let div = $('<div page="' + i + '">' + i + '</div>')
          addActive(div, i, pageIndex)
          mydiv.append(div)
        }
        mydiv.append('<div>...</div>')
        mydiv.append('<div page=' + pageSize + '>' + pageSize + '</div>')
      }
      div = $('<div id="next"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></div>')
      mydiv.append(div)
    }
    refreshPageInfo(data, j)
    // 添加分页按钮焦点
    function addActive(div, i, pageIndex) {
      if (i == pageIndex) {
        div.addClass('active')
        fenye(j, fenyeData)
  
      }
    }
  })
} 

//事件委托，改变分页的属性
$('#mydiv').on("click", ".active",function () {
  obj= JSON.parse($(this).attr('page'));
  $(".active").css({"border":"1px solid #6554C0","background-color":"#6554C0"})

})
//  搜索功能
$('#chaxun').click(function (){
  let data1=$('#input_1').val()
  let data2=$('#input_2').val()
  let data3=$('#fenlei').val()
  let data4=$('#way').val()
  let data5=$('#state').val()
  fenyeData=[]
  j=1
  for (let i = 0; i <menu.length; i++) {
  if(menu[i].mingcheng==data1||menu[i].name==data1){
  fenyeData.push(menu[i])
     show(1)
  
  }else if(menu[i].bianhao==data1){
     fenyeData.push(menu[i])
     show(1)
  
  }else if(menu[i].unit==data2){
  fenyeData.push(menu[i])
     show(1)
  
  }else if(menu[i].fenlei==data3){
   fenyeData.push(menu[i])
     show(1)
  
  }else if(menu[i].way==data4){
   fenyeData.push(menu[i])
     show(1)
  }else if(menu[i].state==data5){
   fenyeData.push(menu[i])
     show(1)
  }
  }
  })

//重置搜索
$('#chongzhi').click(function () {
  fenyeData = menu
  show(1)
})
// 删除选中的数据
let obj=[]
$('#tbody').on("click", ".ss",function () {
  obj.push(JSON.parse($(this).attr('data-item')))
 
})

$('#shanchu').click(function(){
for(let i=0;i<fenyeData.length;i++){
  for(let m=0;m<obj.length;m++){
    if(obj[m].bianhao==fenyeData[i].bianhao){
      fenyeData.splice(i,1)
      show(j)
    }
  }
}
})

//新增
let zt=''
$('#zc').click(function(){
  zt=''
  zt=1
    }
    )
$('#wx').click(function(){
  zt=''
  zt=2
    }
    )
$('#ty').click(function(){
  zt=''
  zt=3
    }
    )
 
$('#queren').click(function(){
  let data1=$('#xz1').val()
  let data2=$('#xz2').val()
  let data3=$('#xz3').val()
  let data4=$('#xz4').val()
  let data5=$('#xz5').val()
  let data6=$('#xz6').val()
  let data7=$('#xz7').val()
  let data8=$('#xz8').val()
  let data9=$('#xz9').val()
  console.log(zt);
  if(zt=1){
    menu.push({bianhao:data1,mingcheng:data3,fenlei:data2,riqi:data4,state:'正常',price:data5,way:data6,unit:data7,location:data8,name:data9},)
  }else
  if(zt=2){
    menu.push({bianhao:data1,mingcheng:data3,fenlei:data2,riqi:data4,state:'维修中',price:data5,way:data6,unit:data7,location:data8,name:data9},)
  }else
  if(zt=3){
    menu.push({bianhao:data1,mingcheng:data3,fenlei:data2,riqi:data4,state:'停用',price:data5,way:data6,unit:data7,location:data8,name:data9},)
  }
  show()
})


//查看详情
// $('#tbody').on("click", ".chakan",function (){
//   window.location.href="zhuangbeixiangqing.html"  
//   let obj1 = JSON.parse($(this).attr('data-item'))

// })
let obj1
  $('#tbody').on("click", ".chakan",function (){
    window.location.href="zhuangbeixiangqing.html"  
    obj1 = JSON.parse($(this).attr('data-item'))
setData('kay',obj1)
  })
  // 上传到本地存储的方法
function setData(key,value){
  // key:用来放value的一个空间 value:这里用来存储了一个JSON对象
  // 将JSON对象转换成字符串
  let valueStr = JSON.stringify(value)
  // 将JSON格式的字符串上传到浏览器本地存储
  sessionStorage.setItem(key,valueStr)

}
